<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">{{Lang.lang('商城訂單')}}</view>
			<view class="back"></view>
			<!-- <view class="rule">规则</view> -->
		</view>

		<view class="clear_box"></view>

		<view class="nav" :class="scrrol == true ? 'scrrolHeader02' : ''">
			<view class="navauto">
				<block v-for="(item, index) in nav" :key="index">
					<view class="menu" :data-index="index" @tap="setNavMenu">
						<view class="text" :class="index == select ? 'menucolor' : ''">
							{{Lang.lang(item.name)}}
						</view>
						<view class="line" :class="index == select ? 'menucolor02' : ''">
							<image src="../../../static/xiao.png" mode="widthFix"></image>
						</view>
					</view>
				</block>
			</view>
		</view>

		<view class="clear_box02" v-if="scrrol == true"></view>
		<view class="page_content">



			<block v-for="(item, index) in list" :key="'goods' + index">
				<view class="content">
					<view class="order_box">
						<view class="shop">{{Lang.lang('訂單號')}}：{{item.order_no}}</view>
						<view class="state">
							<span v-if="item.order_status == 100">{{Lang.lang('待發貨')}}</span>
							<span v-if="item.order_status == 101">{{Lang.lang('待收貨')}}</span>
							<span v-if="item.order_status == 102">{{Lang.lang('已完成')}}</span>
						</view>
					</view>
					<view class="goods_box">
						<image class="goods_img" :src="item.goods_img" mode="scaleToFill"></image>
						<view class="text_box">
							<view class="title">{{item.goods_name}}</view>
							<view class="money_box">
								<view class="money">{{item.total_price}}<span>YYDZ</span></view>
								<view class="num">x{{item.num}}</view>
							</view>
						</view>
					</view>

					<view class="copy_box" v-if="item.order_status == 101 || item.order_status == 102">
						<view class="text">{{Lang.lang('快遞號')}}：{{item.logistics_no}}</view>
						<view class="copy" @tap="copyText(item.logistics_no)">{{Lang.lang('復製')}}</view>
					</view>

					<view class="menu_box" v-if="item.order_status == 101">
						<view class="menu" @click="myOrderConfirmReceipt(item.id)">{{Lang.lang('確認收貨')}}</view>
					</view>
				</view>
			</block>


		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				lang: 'en',
				link: '',
				pupu: false,
				scrrol: false,
				info: '',
				select: 0,
				nav: [{
						name: '全部',
						order_status: 0
					},
					{
						name: '待發貨',
						order_status: 100
					},
					{
						name: '待收貨',
						order_status: 101
					},
					{
						name: '已完成',
						order_status: 102
					},
				],
				list: []

			}
		},
		onLoad() {

		},
		onShow() {
			let that = this;
			this.lang = uni.getStorageSync('_language');
			that.loadData();
		},
		methods: {
			setNavMenu(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.select = index;
				that.loadData();

			},
			loadData() {
				let that = this;
				that.Net._post('api/shop/myOrderList', {
					order_status: that.nav[that.select].order_status
				}, res => {
					if (res.code == 200) {
						that.list = res.data.list
						//console.log(res);

					}
				});
			},
			myOrderConfirmReceipt(id) {
				let that = this;
				that.Net._post('api/shop/myOrderConfirmReceipt', {
					order_id: id
				}, res => {
					if (res.code == 200) {
						that.Msg.Success(res.msg)
						setTimeout(function() {
							that.loadData()
						}, 500)
					}
				});
			},
			copyText(text) {
				let that = this;
				uni.setClipboardData({
					data: text,
					success: function() {
						// 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
						uni.showToast({
							title: that.Lang.lang('複製成功'),
							icon: 'none',
							duration: 2000
						});
					},
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
	}
</script>

<style>
	.header {
		background-color: transparent !important;
	}

	.header .text {
		text-align: center;
	}

	.page_content {
		width: 92%;
		margin: 0 auto;
	}

	.scrrolHeader {
		width: 100%;
		background-color: #1A1A1A !important;

	}

	.nav {
		width: 100%;
		height: 13.5vw;
		overflow: hidden;
		overflow-x: auto;
		/* position: fixed;
		left: 0;
		top: calc(13vw + var(--status-bar-height));
		z-index: 99; */
		box-sizing: border-box;
	}

	.scrrolHeader02 {
		position: fixed;
		left: 0;
		top: calc(17vw + var(--status-bar-height));
		z-index: 99;
		background-color: #1A1A1A;
	}

	.nav .navauto {
		width: fit-content;
		display: flex;
		/* margin-left: 4%; */
		min-width: 100%;
	}

	.nav .navauto .menu {
		width: 25%;
		position: relative;
	}

	.nav .navauto .menu .text {
		font-size: 4vw;
		color: #fff;
		text-align: center;
		line-height: 13.5vw;
	}

	.nav .navauto .menu .line {
		width: 25%;
		border-radius: 3vw;
		position: absolute;
		left: calc(50% - 12.5%);
		bottom: 0vw;
		display: none;
	}

	.nav .navauto .menu .line image {
		width: 100%;
	}

	.menucolor {
		color: #fff !important;
		font-weight: bold;
		font-size: 4.5vw !important;
	}

	.menucolor02 {
		display: block !important;
	}

	.content {
		width: 100%;
		margin: 0 auto;
		background: #1A1A1A;
		border-radius: 4vw;
		margin-top: 4%;
		padding: 4vw;
	}

	.content .order_box {
		width: 100%;
		height: 8vw;
		display: flex;
	}

	.content .order_box .shop {
		font-size: 3.5vw;
		color: #BDBDBD;
		flex: 1;
		display: flex;
		line-height: 8vw;
	}

	.content .order_box .shop .icon {
		font-size: 5vw;
		margin-right: 1.5vw;
		font-weight: 400;
	}

	.content .order_box .state {
		font-size: 3.5vw;
		color: #fff;
		line-height: 8vw;
	}

	.content .goods_box {
		width: 100%;
		margin-top: 3vw;
		display: flex;
	}

	.content .goods_box .goods_img {
		width: 24vw;
		height: 24vw;
		border-radius: 2vw;
		margin-right: 3vw;
	}

	.content .goods_box .text_box {
		flex: 1;
	}

	.content .goods_box .text_box .title {
		height: 11vw;
		font-size: 3.5vw;
		color: #fff;
		line-height: 6vw;
		flex: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.content .goods_box .text_box .money_box {
		display: flex;
		margin-top: 1vw;
	}

	.content .goods_box .text_box .money_box .money {
		font-size: 5vw;
		color: #FF2D55;
		line-height: 6vw;
		flex: 1;
		display: flex;
		align-items: center;
		font-weight: bold;
	}

	.content .goods_box .text_box .money_box .money span {
		color: #fff;
		font-size: 3.5vw;
		font-weight: 400;
		margin-left: 1vw;
	}



	.content .goods_box .text_box .money_box .num {
		font-size: 3vw;
		color: #fff;
		flex: 1;
		text-align: right;
		line-height: 6vw;
	}

	.content .goods_box .text_box .actual_box {
		display: flex;
		justify-content: flex-end;
		margin-top: 1vw;
	}

	.content .goods_box .text_box .actual_box .num {
		font-size: 3vw;
		color: #999;
		line-height: 6vw;
		margin-right: 2vw;
	}

	.content .goods_box .text_box .actual_box .text {
		font-size: 3vw;
		color: #333;
		line-height: 6vw;
		margin-right: 1vw;
	}

	.content .goods_box .text_box .actual_box .actual {
		font-size: 3.5vw;
		color: #FD3633;
		line-height: 6vw;
	}

	.content .menu_box {
		width: 100%;
		margin: 0 auto;
		height: 13.5vw;
		display: flex;
		justify-content: flex-end;
		position: relative;
	}

	.content .menu_box .text {
		flex: 1;
		text-align: left;
		font-size: 3.5vw;
		color: #FD3633;
		line-height: 13.5vw;
	}

	.content .menu_box .menu {
		width: 24vw;
		height: 10vw;
		background-color: #0055FE;
		box-sizing: border-box;
		margin-top: 3vw;
		margin-left: 2vw;
		border-radius: 4vw;
		line-height: 10vw;
		text-align: center;
		font-size: 3.5vw;
		color: #fff;

	}

	.content .menu_box .menu02 {
		background-color: #2A2A2A;
	}

	.content .menu_box .menu03 {
		position: absolute;
		left: 0.3vw;
		display: flex;
	}

	.content .menu_box .menu03 .i {
		font-size: 6vw;
		color: #f72f4b;
		line-height: 13.5vw;
		margin-right: 1.5vw;
	}

	.content .menu_box .menu03 .t {
		font-size: 3vw;
		color: #333;
		line-height: 13.5vw;
	}

	.content .menu_box .reward {
		position: absolute;
		left: 1vw;
		top: 0;
		display: flex;
	}

	.content .menu_box .reward .icon {
		width: 8vw;
		display: flex;
		align-items: center;
	}

	.content .menu_box .reward .icon image {
		width: 100%;
	}

	.content .menu_box .reward .text {
		font-size: 3vw;
		color: #999;
		line-height: 13.5vw;
		margin: 0 1vw 0 1.5vw
	}

	.content .menu_box .reward .money {
		font-size: 3vw;
		color: #FD3633;
		line-height: 13.5vw;
	}

	.content .copy_box {
		width: 100%;
		border-radius: 4vw;
		height: 13vw;
		display: flex;
		align-items: center;
		background-color: #090909;
		padding: 0 4%;
		margin-top: 4vw;
	}

	.content .copy_box .text {
		color: #fff;
		font-size: 3.5vw;
		flex: 1;
	}

	.content .copy_box .copy {
		color: #fff;
		font-size: 3.5vw;
		height: 7vw;
		line-height: 7vw;
		padding: 0 2vw;
		border-radius: 1vw;
		border: 1px solid #fff;
	}
</style>